<template>
	<div class="Echarts">
		<div ref="myChart" id="myChart"  class="inMain" style="width: 418px;height: 210px;"></div>
	</div>
</template>

<script>
	export default {
		name: 'internationEc1l',
		mounted() {
			
		},
		methods: {
			// getlistdata(){
			// 	var _that=this
			// 	this.$axios.post('')
			// 		.then(function(response) {
			// 			// this.$nextTick(()=>{
							
			// 			// })
			// 		})
			// 		.catch(function(error) {
			// 			console.log(error);
			// 		});
			// },
			myEcharts() {
				let myChart = this.$echarts.getInstanceByDom(this.$refs.myChart) ;
				//配置图表
				if (myChart==null) {
				    myChart = this.$echarts.init(this.$refs.myChart);  //利用原型调取Echarts的初始化方法
				}
				const option = {
					backgroundColor: '#00043A',
					tooltip: {
						trigger: 'axis',
						show: false,
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						},
					},
					legend: {
						show: true,
						itemWidth:14,
						itemheight:14,
						bottom:'2%',
						right:'10%',
						borderRadius: 10,
						textStyle: {
						    color: "#DFF8FF"
						}
					},
					grid: {
						left: '3%',
						right: '10%',
						top:"10%",
						width: "90%",
						height:'75%',
						containLabel: true
					},
					xAxis: [{
						splitLine: {
							show: false
						},
						axisLine: {
							show: true
						},
						axisLabel: {
						      color: "#DFF8FF",
							  fontSize:15
						    },
						axisTick: {
							show: false
						},
						type: 'category',
						data: ['第一季度', '第二季度', '第三季度', '第四季度'],
					}],
					yAxis: [{
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
							        type: "dashed",
									color:'#556468'
							      }
						},
						axisLine: { //y轴
							show: true
						},
						interval: 50,
						
						axisTick: {
							show: false
						},
						
						
					}],
					series: [{
						name: '全国',
						type: 'bar',
						barWidth: 12, // 柱子宽度
						itemStyle: {
							borderRadius: 4,
							color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							        offset: 0,
							        color: '#04CDF4'
							    }, {
							        offset: 1,
							        color: '#2682FF' 
							    }], false), 
						},
						data: [75, 110, 120, 160]
					}, {
						name: '浙江',
						type: 'bar',
						barWidth: 12, // 柱子宽度
						itemStyle: {
							borderRadius: 4,
							color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							        offset: 0,
							        color: '#AF89EB'
							    }, {
							        offset: 1,
							        color: '#712ACE' 
							    }], false), 
						},
						data: [30, 35, 40, 48]
					},{
						name: '宁波',
						type: 'bar',
						barWidth: 12, // 柱子宽度
						itemStyle: {
							borderRadius: 4,
							color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							        offset: 0,
							        color: '#F5D75F '
							    }, {
							        offset: 1,
							        color: '#F5AF0F  ' 
							    }], false), 
						},
						data: [10, 20, 30, 30]
					}]
				};
				myChart.setOption(option);  //将编写好的配置项挂载到Echarts上
				window.addEventListener("resize", function() {
				    myChart.resize();  //页面大小变化后Echarts也更改大小
				});
			}
		},
		mounted() {
			this.myEcharts();
		}
	}
</script>


<style>

</style>
